/**
 * 基于XLSX的Excel数据导入组件
 * @author SPY
 * @description 将excel数据导入到数据库等
 * @date 2020/03/14
 */

import React, { Component } from 'react';
import { Card, Table, message } from 'antd';
import ExcelToJson from './components/ExcelToJson';

const mappingList = [
    {
        key: 'name',
        label: "姓名",
    },
    {
        key: 'age',
        label: "年龄",
    },
    {
        key: 'address',
        label: "住址",
    },
]

class ExcelToJsonPage extends Component {

    state = {
        data: [],
        columns: [],
    }

    onFileChange = (excelData, excelHeader) => {
        this.setState({
            data: excelData,
            columns: excelHeader,
        }, () => {
            message.success('Excel文件解析完毕');
        });
    }

    render() {
        const { data, columns } = this.state;
        return (
            <Card>
                <ExcelToJson
                    onFileChange={this.onFileChange}
                    mappingList={mappingList}
                />
                {
                    Array.isArray(data) && Array.isArray(columns)
                    && data.length !== 0 && columns.length !== 0 && (
                        <Table
                            dataSource={data}
                            columns={columns}
                            size='small'
                            style={{ marginTop: '1%' }}
                        />
                    )
                }
            </Card>
        );
    }
}

export default ExcelToJsonPage;